/*
 * @Author: xiaosihan 
 * @Date: 2025-01-15 08:56:47 
 * @Last Modified by: xiaosihan
 * @Last Modified time: 2025-01-15 14:56:02
 */


import { autorun } from "mobx";
import { ReactNode, useEffect, useRef, useState } from "react";
import styles from "./previewImgModal.module.less";
import previewImgModalStore from "./previewImgModalStore";
import clsx from "clsx";

interface Iprops {
  children?: ReactNode
}

// 图片预览组件
export default function PreviewImgModal() {

  const dom = useRef<HTMLDivElement | null>(null);
  const [url, setUrl] = useState(previewImgModalStore.url);
  const [title, setTitle] = useState(previewImgModalStore.title);
  const [createTime, setCreateTime] = useState(previewImgModalStore.createTime);

  useEffect(() => {

  }, []);

  useEffect(() => autorun(() => {
    setUrl(previewImgModalStore.url);
    setTitle(previewImgModalStore.title);
    setCreateTime(previewImgModalStore.createTime);
  }), []);

  return (
    <div
      ref={dom}
      className={clsx(styles.previewImgModal, url && styles.show)}
    >
      <img src={url} alt="" className={styles.img} />
      <div className={styles.card} >
        <div>
          <span className={styles.title} >{title}</span>
          <span className={styles.limitedTimeFree} >限时免费</span>
        </div>
        {/* 
            <div>
              <span className={styles.resolution} >1000*1000px</span>
              <span className={styles.createTime} >上传时间{createTime}</span>
            </div> 
        */}
      </div>
    </div>
  );

}